import React, { useState, useEffect } from 'react'
import { http } from '@/lib'
import apis from '@/apis/CustomerManage'
import ReviewHandleProgress from '@/components/ReviewHandleProgress'
import { formatReviewProgreData } from '@/common/SettledReview'
import './style.scss'
import { Spin } from 'antd'

function ReviewLogContent(props: IReviewLogContentProps) {
  const [processData, setProcessData] = useState([])
  const [loading, setLoading] = useState(false)
  useEffect(() => {
    getProcessData()
    return () => {
      setProcessData([])
    }
  }, [props.id])

  const getProcessData = () => {
    setLoading(true)
    const params = { id: props.id, brandCode: props.brandCode }
    http.get(apis.SettledLogs, { params }).then(res => {
      const processData = formatReviewProgreData(res.data)
      setProcessData(processData)
    }).finally(() => {
      setLoading(false)
    })
  }

  return (
    <div className='review-handle-progress-modal'>
      <Spin spinning={loading}>
        <ReviewHandleProgress data={processData} inner={true} />
      </Spin>
    </div>
  )
}

export default React.memo(ReviewLogContent)

interface IReviewLogContentProps {
  id: string
  brandCode: string
}
